<template>
    <div class="l-h5-item c-h5-forecast ">
        <div class="c-h5-forecast__day">
            <div class="c-h5-rain__detail" v-if="rain">
                    <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="插件布局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="浅色" transform="translate(-17.000000, -417.000000)">
                                <g id="分组" transform="translate(0.000000, 400.000000)">
                                    <g id="分组-2" transform="translate(16.000000, 16.000000)">
                                        <g id="图标/h5/降水-地图">
                                            <g id="地图">
                                                <rect id="Rectangle-path" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
                                                <path d="M14.5014958,5.45363826 L14.5014958,12 C14.5014958,12.1271458 14.4521982,12.2759329 14.3387711,12.3331421 L9.67343182,14.3149105 C9.62546434,14.3383986 9.58981504,14.3825047 9.53834593,14.3825047 C9.48363102,14.3825047 9.42842046,14.3700171 9.37970149,14.3430274 L5.53151544,12.0780671 L1.99739957,14.0060079 C1.89372586,14.0632171 1.76781122,14.060467 1.66512885,14.0002678 C1.56345379,13.9398128 1.50149579,13.830383 1.50149579,13.71096 L1.50149579,7.03965179 C1.4988938,7.01170804 1.49971879,6.98388611 1.50371872,6.95672645 C1.51491021,6.859514 1.56782879,6.77123477 1.65040283,6.71669409 L1.65243683,6.71848112 C1.67612204,6.70230378 1.7021953,6.68879663 1.7303882,6.67853525 L3.04595787,6.19970705 C3.22760014,6.13359467 3.42844496,6.22725015 3.49455734,6.40889242 C3.56066972,6.59053468 3.46701424,6.79137951 3.28537197,6.85749188 L2.17305647,7.26234162 L2.17305647,13.1455833 L5.36964119,11.4017576 C5.46931761,11.34805 5.59049946,11.34805 5.68968021,11.401262 L9.54387818,13.6689725 L13.7648003,11.8247348 L13.7648003,5.94422581 L13.7679136,5.93246355 L13.0629335,6.27630534 C12.8891969,6.36104233 12.6796627,6.28889391 12.5949257,6.11515732 C12.5101887,5.94142074 12.5823371,5.7318865 12.7560737,5.64714951 L14.0143854,5.0334299 C14.0610043,5.01069234 14.1102007,4.99925077 14.1588718,4.99803683 C14.2228399,4.99414493 14.2881532,5.00860783 14.3467657,5.04 C14.4396343,5.09016102 14.4864689,5.14209141 14.4983871,5.23291586 C14.5239797,5.30612949 14.5237352,5.38342315 14.5014958,5.45363826 Z" id="Shape" fill="#BDCEE0" fill-rule="nonzero"></path>
                                                <path d="M8.21083791,9.25997773 C8.14939109,9.31168667 8.07505234,9.33667773 7.99998415,9.33667773 C7.92491595,9.33667773 7.85083093,9.31168667 7.7893841,9.25997773 C7.67540224,9.16679291 5,6.93254773 5,4.64235648 C5,2.97473513 6.34562975,1.61791106 8,1.61791106 C9.65437025,1.61791106 11,2.97473514 11,4.64235648 C10.9999842,6.93254773 8.32456607,9.16679292 8.21083791,9.25997773 Z M8,2.61791106 C6.89745088,2.61791106 6,3.58184759 6,4.76612998 C6,6.25720902 7.4764247,7.82834483 8,8.33791106 C8.52314048,7.8276587 10,6.25469813 10,4.76612998 C10,3.58184759 9.10275294,2.61791106 8,2.61791106 Z" id="Combined-Shape" fill="#58E2C8" fill-rule="nonzero"></path>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                    <span>{{ rain.txt }}</span>
                </div>
            <p class="c-h5-forecast-day__title">七天预报</p>
            <div class="forecast-day-wrap">
                <div class="c-h5-forecast-day__main">
                    <div class="c-h5-forecast-day__list">
                        <div class="c-h5-forecast-day__item">
                            <p class="forecast-day__time">{{ dateStr(yesterday.date) }}</p>
                            <p class="forecast-day__week">{{ weekStr(yesterday.date) }}</p>
                            <img class="forecast-day__img"
                                src="https://widget-s.qweather.net/img/plugin/190516/icon/c/101d.png">
                            <p class="forecast-day__holder"></p>
                            <img class="forecast-day__img"
                                src="https://widget-s.qweather.net/img/plugin/190516/icon/c/100n.png">
                            <p class="forecast-day__wind">{{ yesterday.wind_dir }}</p>
                            <p class="forecast-day__level"></p>
                        </div>
                        <div class="c-h5-forecast-day__item " v-for="(item, index) in daily_forecast"
                            :class="{ 'forecast-day--active': index == 0 }">
                            <p class="forecast-day__time">{{ dateStr(item.date) }}</p>
                            <p class="forecast-day__week">{{ weekStr(item.date) }}</p>
                            <img class="forecast-day__img"
                                :src="'https://widget-s.qweather.net/img/plugin/190516/icon/c/' + item.cond_code_d + 'd.png'">
                            <p class="forecast-day__holder"></p>
                            <img class="forecast-day__img"
                                :src="'https://widget-s.qweather.net/img/plugin/190516/icon/c/' + item.cond_code_n + 'n.png'">
                            <p class="forecast-day__wind">{{ item.wind_dir }}</p>
                            <p class="forecast-day__level">{{ item.wind_sc }}级</p>
                        </div>

                    </div>

                    <div class="chart-wrap">
                        <forecast-charts :xdata="xdata"></forecast-charts>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ForecastCharts from './charts.vue'
export default {
    components: { ForecastCharts },
    props: ['daily_forecast','rain','yesterday'],
    data() {
        const today = new Date();
        return {
            today
        }
    },
    methods: {
        dateStr(str) {
            const date = new Date(str);
            return (date.getMonth() + 1) + "/" + date.getDate();
        },
        weekStr(str) {
            const list = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            const date = new Date(str);
            return list[date.getDay()]
        }
    },
    computed:{
        xdata(){
             var x1=[this.yesterday.tmp_min],x2 = [this.yesterday.tmp_max]
             this.daily_forecast.map((item)=>{
                x1.push(item.tmp_min);x2.push(item.tmp_max)
             });
             return {x1,x2}
        }
    }
}

</script>
<style>
.c-h5-forecast-day__list {
    display: flex;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    padding: 10px 0px;
}

.c-h5-forecast-day__item img {
    width: 28px;
}

.c-h5-forecast-day__item {
    text-align: center;
    color: white;
    flex: 1;
    border-right: 0.5px dashed #fff5f5;
    padding: 0 2px;
}

.c-h5-forecast-day__item {}

p.forecast-day__time {
    /* margin-top: 0; */
}

.forecast-day__holder {
    margin: 0;
    height: 230px;
}

p.forecast-day__wind {
    min-height: 40px;
}

p.forecast-day__level {
    /* margin-bottom: 0; */
}

p.c-h5-forecast-day__title {
    font-size: 20px;
    color: white;
    padding: 10px;
    margin-top: 0;
    margin: 0;
}

.chart-wrap {
    height: 230px;
    position: absolute;
    top: 105px;
    width: 100%;
}

.c-h5-forecast-day__main {
    position: relative;
}
.c-h5-rain__detail {
    font-size: 16px;
    color: white;
    padding-left: 10px;
    padding: 10px;
    border-bottom: 1px solid;
}
.c-h5-rain__detail span {
    margin-left: 5px;
}
.c-h5-forecast-day__item.forecast-day--active {
    color: #ffd43a;
}
</style>